<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      div{border: solid 1px black;margin: 10px;padding: 10px;}
    </style>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <p>我有一个：{{msg}}</p>
      <Child></Child>
    </div>
	</body>
  <script src="../vue.js"></script>
  
  <template id="kx">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}}</p>
      <Child1 :abc="msg"></Child1>
      <Child2></Child2>
    </div>
  </template>
  
  <template id="yz">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}} - {{tel}}</p>
      <!-- 1. 在父组件调用子组件的位置，使用绑定属性的形式，给子组件添加自定义属性 -->
      <Child :a="msg" :b="tel" :c="obj"></Child>
    </div>
  </template>
  
  <template id="ql">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}}</p>
      <!-- 3. 在子组件内部，按照数据的方式使用 -->
      <p>接收到了：{{a}} - {{b}} - {{c}}</p>
    </div>
  </template>
  
  <template id="yx">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}}</p>
    </div>
  </template>
  
  <script>
    
    // 努尔哈赤
    // ↓
    // 康熙
    // ↓
    // 雍正，胤祥
    // ↓
    // 乾隆
    
    const ql = {
      // 2. 在子组件内部使用props的选项，接收父组件传入的数据
      // props默认是一个数组数据,数组内部是父组件发送过来的数据
      props:["a","b","c"],
      template:"#ql",
      data(){
        return {
          title:"乾隆",
          msg:"机器人"
        }
      }
    }
    
    const yx = {
      template:"#yx",
      data(){
        return {
          title:"胤祥",
          msg:"宝马"
        }
      }
    }
    
    const yz = {
      // 如果需要对父组件传入的数据,进行修饰
      // props需要定义成对象类型
        // 在props的对象内,接收到的数据名为key,值也是对象类型
          // 对象的值内部:required表示是否必传,type为接收到的数据的类型,default默认值
      props:{
        abc:{
          // required:true,
          type:String,
          default:"萝卜章"
        }
      },
      template:"#yz",
      data(){
        return {
          title:"雍正",
          msg:"二环的四合院",
          tel:"诺基亚2700",
          obj:{
            q:"啊",
            w:"嘿",
            e:123,
            r:true
          }
        }
      },
      components:{
        Child:ql
      },
      mounted(){
        console.log(`我是${this.title},接收到${this.abc}`)
      }
    }
    
    const kx = {
      template:"#kx",
      data(){
        return {
          title:"康熙",
          msg:"玉玺"
        }
      },
      components:{
        Child1:yz,
        Child2:yx
      }
    }
    
    
    
    new Vue({
      el:"#app",
      data:{
        title:"努尔哈赤",
        msg:"江山"
      },
      components:{
        Child:kx
      }
    })
    
    
  </script>
</html>
